<template>
  <div>
    <div class="dic" v-for="(item, index) in arr" :key="index">
      <img :src="`https://api.aslegou.top` + item.img" alt="" />
      <p>{{ item.goodsname }}</p>
      <p>价格：{{ item.market_price }}</p>
      <p>
        购买数量
        <button @click="add(index)">+</button>{{ item.number }}
        <button @click="jian(index)">-</button>
        <!-- <el-input-number
          class="input"
          v-model="num"
          @change="handleChange"
          :min="1"
          :max="1000"
        ></el-input-number> -->
      </p>
      <p>
        <el-button type="warning">加入购物车</el-button>
        <el-button type="danger">立即购买</el-button>
      </p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
      //   num: 1
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      axios
        .get("https://api.aslegou.top/api/getgoodsinfo?id=10")
        .then((res) => {
          console.log(res.data.list);
          this.arr = res.data.list;
        });
    },
    add(index) {
      this.arr[index].number++;
    },
    jian(index) {
      this.arr[index].number--;
    },
    // handleChange(value) {
    //   console.log(value);
    // },
  },
};
</script>

<style lang="scss" scoped>
.dic {
  width: 300px;
  height: 500px;
  border: 1px solid blueviolet;
  img {
    width: 100%;
    height: 250px;
  }
}
</style>